<template>
    <div>
        <!-- element的container布局容器 -->
        <el-container>

            <!-- 侧边栏 -->
            <el-aside :width="iscollapse ? '64px' : '200px'" >
              <div class="toggle-button" @click="toggleCollapse">|||</div>
    <el-menu
      background-color="#eee"
      text-color="black"
      active-text-color="#409eff"
      :collapse="iscollapse"
      :collapse-transition="false"
      router
      >
      <!-- 一级菜单 -->
      <el-submenu index="1">
          <!-- 菜单的模板内容 -->
        <template slot="title">
          <i class="el-icon-user-solid"></i>
          <span>个人信息</span>
        </template>
        <!-- 二级菜单 -->
       <el-menu-item index="mymessage" tag="">
           <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span>我的信息</span>
        </template>
       </el-menu-item>
       <el-menu-item index="myavatar" tag="">
           <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span>我的头像</span>
        </template>
       </el-menu-item>
       <el-menu-item index="1-2" tag="">
           <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span>实名认证</span>
        </template>
       </el-menu-item>
      </el-submenu>
      <el-submenu index="2">
          <!-- 菜单的模板内容 -->
        <template slot="title">
          <i class="el-icon-notebook-1"></i>
          <span>文章中心</span>
        </template>
        <!-- 二级菜单 -->
       <el-menu-item index="myarticle" tag="">
           <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span>发表的文章</span>
        </template>
       </el-menu-item>
        <el-menu-item index="mylike" tag="">
           <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span>喜欢的文章</span>
        </template>
       </el-menu-item>
      </el-submenu>
            <el-submenu index="3">
          <!-- 菜单的模板内容 -->
        <template slot="title">
          <i class="el-icon-shopping-cart-2"></i>
          <span>购物中心</span>
        </template>
        <!-- 二级菜单 -->
       <el-menu-item index="3-1" tag="">
           <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span>商品浏览记录</span>
        </template>
       </el-menu-item>
        <el-menu-item index="3-2" tag="">
           <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span>收藏的商品</span>
        </template>
       </el-menu-item>
      </el-submenu>
      <el-submenu index="4">
          <!-- 菜单的模板内容 -->
        <template slot="title">
          <i class="el-icon-s-tools"></i>
          <span>设置</span>
        </template>
        <!-- 二级菜单 -->
       <el-menu-item index="changepassword" tag="">
           <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span>修改密码</span>
        </template>
       </el-menu-item>
        <el-menu-item index="4-2" tag="">
           <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span>退出登陆</span>
        </template>
       </el-menu-item>
      </el-submenu>
    </el-menu>
</el-aside>
    <!-- 主体区域 -->
    <el-main>
    <!-- 主体内容router-view -->
      <router-view></router-view>
</el-main>
    </el-container>


    </div>

</template>
<script>
export default {
  data() {
    return {
      iscollapse:false,
    }
  },
        methods: {
      handleOpen(key, keyPath) {
        window.console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        window.console.log(key, keyPath);
      },
      //点击按钮，切换和折叠菜单
      toggleCollapse(){
        this.iscollapse=!this.iscollapse
      }
    }
}
</script>
<style scoped>
.el-container{
    width: 1000px;
    height: 100%;
    position: relative;
    left: 44%;
    transform: translateX(-50%);
   
}
  .el-main {
    background-color: #fff;
    
    
  }
  .el-aside {
    background-color: #eee;
    /* color: #eee; */
    line-height: 200px;
    /* border: solid 1px #eee; */
  }
  .toggle-button{
    background-color: #eee;
    line-height: 24px;
    font-size: 10px;
    color: black;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
  }
</style>